{extend name="Public:centerheard" /}
{block name='body'}
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2" style="height:100%;">
	<div id="main" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
		<main class="trash__main">
			<div class="onlydesktop toolbar__toolbar" role="toolbar">
			<button data-toggle="modal" data-target="#recover"><!-- react-text: 161 --> <!-- /react-text --><i class="icon_restore"></i><!-- react-text: 163 -->恢复<!-- /react-text --></button>
			<button data-toggle="modal" data-target="#forever_del" style="width: 100px;"><!-- react-text: 165 --> <!-- /react-text --><i class="icon_delete"></i><!-- react-text: 167 -->永久删除<!-- /react-text --></button><!-- react-text: 168 -->回收站里内容会在7天后自动清空，你可以选择恢复<!-- /react-text -->
			<div class="none_select toolbar__right" data-toggle="modal" data-target="#clean">
				<span class="trash__cleartrash clickable text_overflow">
					<i class="icon_trash font_icon_17"></i><!-- react-text: 172 -->清空回收站<!-- /react-text -->
				</span>
			</div>
			</div>
			<div class="toolbar__selected toolbar__cardselected">
				<label tabindex="0" class=" Checkbox__main ">
					<input id="Allright" type="checkbox" value="on" onclick="check()">
					<span class="Checkbox__icon Checkbox__checkbox"><i class="icon_correct_inline"></i></span>
					<span id="check_all" class="Checkbox__label">全选</span>
				</label>
			</div>
			<div class="mobilemargin trash__grow">
				{volist name='list' id='vo'}
				<div class="none_select gallery__parent gallery__children trash__photo">
					<div id="{$vo.id}"  name="{$vo.name}" class=" Image__main" onclick="check1(this)">
						<img alt="" class=" Image__absolute Image__img " src="{$vo.img_url}">
						<input id="all_num" value="{$num}" style="display: none">
						<input  type="hidden" name="all_pic" value="{$vo.id}">
						<a tabindex="-1" class=" Image__clickhandle Image__space " style="padding-bottom: 100%;"></a>
						<div class="Image__select" title="点击选择"><i class="icon_correct_inline Image__selecticon"></i></div>
						<div class=" text_overflow Image__title Image__blackbackground">剩余：{$vo.time} 天<span style="float: right;font-size: 6px;color: grey">{$vo.is_photo}</span></div>
					</div>
				</div>
				{/volist}
			</div>


			<input id="pic_id" type="hidden" name="id" value="">
			<!-- 恢复 -->
			<div class="modal fade" id="recover" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<form action="{:url('shop/photos/del')}" method="post">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								恢复
							</div>
							<div class="modal-body" style="text-align: center">
								<label>是否确定恢复选中的相册和图片？</label>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<button type="submit" class="btn btn-primary">确定</button>
							</div>
						</div>
					</div>
				</form>
			</div>

			<!-- 永久删除 -->
			<div class="modal fade" id="forever_del" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<form action="{:url('shop/photos/del')}" method="post">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								永久删除
							</div>
							<div class="modal-body" style="text-align: center">
								<label>是否确定永久删除选中的相册和图片？(无法恢复)</label>
								<input type="hidden" name="id">
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<button type="submit" class="btn btn-primary">确定</button>
							</div>
						</div>
					</div>
				</form>
			</div>

			<!-- 清空回收站 -->
			<div class="modal fade" id="clean" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<form action="{:url('shop/photos/del')}" method="post">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								清空回收站
							</div>
							<div class="modal-body" style="text-align: center">
								<label>是否确定清空回收站？(无法恢复)</label>
								<input type="hidden" name="id">
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								<button type="submit" class="btn btn-primary">确定</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</main>
	</div>
</div>
<script>
    var i=0;
    var arr = new Array();
    var pics_id = [];
    arr = document.getElementsByName("all_pic");
    function check() {
        if(document.getElementById("Allright").checked){
            i = document.querySelector("#all_num").value;
            document.getElementById("check_all").innerHTML ="已选中"+ i +"项";
            $(document.getElementsByClassName("Image__main")).addClass("Image__checked");
            for(var n=0;n<arr.length;n++)
            {
                pics_id[n] = arr[n].value
            }
        }else{
            document.getElementById("check_all").innerHTML ="全选";
            $(document.getElementsByClassName("Image__main")).removeClass("Image__checked");
            i = 0;
            pics_id = []
        }
        document.getElementById("pic_id").value = pics_id
    }
    function check1(obj){
        var name =$(obj).attr('name');
        var css =$(obj).attr('class');
        var id =$(obj).attr('id');
        var val =document.getElementById(id);
        if (isContains(css,"Image__checked")) {
            i--;
            $(document.getElementsByName(name)).removeClass("Image__checked");
            document.getElementById("check_all").innerHTML ="已选中"+ i +"项";
            if (i==0){
                document.getElementById("Allright").checked = false;
                document.getElementById("check_all").innerHTML ="全选";

            }
            pics_id.remove(val.id)
        } else {
            i++;
            $(document.getElementsByName(name)).addClass("Image__checked");
            document.getElementById("Allright").checked = true;
            document.getElementById("check_all").innerHTML ="已选中"+ i +"项";
            pics_id.push(val.id)
        }
        document.getElementById("pic_id").value = pics_id
    }
    function isContains(str, substr) {
        return str.indexOf(substr) >= 0;
    }
    Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };
    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
</script>
{/block}